<template>
  <div>
    <el-card class="box-card">
      <el-tabs :tab-position="tabPosition">
        <el-tab-pane label="基本信息">
          <el-divider><i class="el-icon-caret-left"></i></el-divider>
          <el-card class="box-card">
            <label style="font-size: 15px;font-weight: bold">基本信息</label>
            <el-form :inline="true" label-width="200px" :model="truckData">
              <el-form-item label="运输任务编号：" prop="tid">
                <el-input v-model="truckData.tid" disabled></el-input>
              </el-form-item>
              <el-form-item label="车牌号码：" prop="plate">
                <el-input v-model="truckData.plate" disabled></el-input>
              </el-form-item>
              <el-form-item label="调度机构：" prop="jname">
                <el-input v-model="truckData.jname" disabled></el-input>
              </el-form-item>
              <el-form-item label="起始地：" prop="startJname">
                <el-input v-model="truckData.startJname" disabled></el-input>
              </el-form-item>
              <el-form-item label="目的地：" prop="endJname">
                <el-input v-model="truckData.endJname" disabled></el-input>
              </el-form-item>
            </el-form>
            <el-divider></el-divider>
            <div style="text-align: center">
              <el-button @click="exitInfo">返回</el-button>
            </div>
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="任务轨迹">
          <el-divider><i class="el-icon-caret-left"></i></el-divider>
          <el-card class="box-card">
            <label style="font-size: 15px;font-weight: bold">任务轨迹</label>
            <el-form :inline="true" label-width="200px" :model="truckData">
              <el-form-item label="车牌号：" prop="plate">
                <el-input v-model="truckData.plate" disabled></el-input>
              </el-form-item>
              <el-form-item label="司机：" prop="uname">
                <el-input v-model="truckData.uname" disabled></el-input>
              </el-form-item>
              <el-form-item label="计划发车时间：" prop="planTime">
                <el-input v-model="truckData.planTime" disabled></el-input>
              </el-form-item>
              <el-form-item label="实际发车时间：" prop="actualTime">
                <el-input v-model="truckData.actualTime" disabled></el-input>
              </el-form-item>
              <el-form-item label="计划到达时间：" prop="planEndTime">
                <el-input v-model="truckData.planEndTime" disabled></el-input>
              </el-form-item>
              <el-form-item label="实际到达时间：" prop="actualEndTime">
                <el-input v-model="truckData.actualEndTime" disabled></el-input>
              </el-form-item>
            </el-form>
            <br><br><br>
            <label style="font-size: 15px;font-weight: bold">轨迹查看</label>
            <br><br>

              <baidu-map
                v-if="mapshow"
                class="map"
                :center="startMap"
                :zoom="13"
                :scroll-wheel-zoom="true">
                <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
                <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-city-list>
                <bm-driving
                  :start="startMap"
                  :end="stopMap"
                  :panel="false"
                  :autoViewport="true">
                </bm-driving>
              </baidu-map>

            <el-divider></el-divider>
            <div style="text-align: center">
              <el-button @click="exitInfo">返回</el-button>
            </div>
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="运单详情">
          <el-divider><i class="el-icon-caret-left"></i></el-divider>
          <el-card class="box-card">
            <label style="font-size: 15px;font-weight: bold">运单详情</label>

            <el-table
              v-loading="loading"
              :data="truckOrderData"
              style="width: 100%">
              <el-table-column
                width="120"
                label="序号">
                <template slot-scope="scop">
                  {{ scop.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="tid"
                width="120"
                label="运单编号">
              </el-table-column>
              <el-table-column
                prop="moTime"
                width="200"
                label="下单时间">
              </el-table-column>
              <el-table-column
                prop="moName"
                width="120"
                label="发件人">
              </el-table-column>
              <el-table-column
                prop="moPhone"
                width="200"
                label="发件人电话">
              </el-table-column>
              <el-table-column
                prop="moAddr"
                width="200"
                label="发件人地址">
              </el-table-column>
              <el-table-column
                width="120"
                label="数量">
                <template slot-scope="scop">
                  {{ scop.row.ynum >= 1 ? scop.row.ynum : 0 }}
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                width="120"
                label="操作">
                <template slot-scope="scop">
                  <el-button
                    type="text"
                    @click="selTrckOrderInfo(scop.row.oid,scop.row.tid)">
                    查看详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-divider></el-divider>
            <div style="text-align: center">
              <el-button @click="exitInfo">返回</el-button>
            </div>
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="交付照片">
          <el-divider><i class="el-icon-caret-left"></i></el-divider>
          <el-card class="box-card">

            <label style="font-size: 15px;font-weight: bold">交付货品照片</label>
            <br><br>
            <el-image :src="ossaddr+'/'+truckData.jfImage">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">···</span>
              </div>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
                <label style="color: #919191">图片未上传···</label>
              </div>
            </el-image>
            <el-divider></el-divider>
            <label style="font-size: 15px;font-weight: bold">支付回单照片</label>
            <br><br>
            <el-image :src="ossaddr+'/'+truckData.hdImage">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">···</span>
              </div>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
                <label style="color: #919191">图片未上传···</label>
              </div>
            </el-image>

            <el-divider></el-divider>
            <div style="text-align: center">
              <el-button @click="exitInfo">返回</el-button>
            </div>
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="提货照片">
          <el-divider><i class="el-icon-caret-left"></i></el-divider>
          <el-card class="box-card">

            <label style="font-size: 15px;font-weight: bold">提货货品照片</label>
            <br><br>
            <el-image :src="ossaddr+'/'+truckData.hpImage">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">···</span>
              </div>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
                <label style="color: #919191">图片未上传···</label>
              </div>
            </el-image>
            <el-divider></el-divider>
            <label style="font-size: 15px;font-weight: bold">提货凭证照片</label>
            <br><br>
            <el-image :src="ossaddr+'/'+truckData.pzImage">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">···</span>
              </div>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
                <label style="color: #919191">图片未上传···</label>
              </div>
            </el-image>

            <el-divider></el-divider>
            <div style="text-align: center">
              <el-button @click="exitInfo">返回</el-button>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import trucksportsAPI from '../../../../api/logisticsmanagement/transportationmanagement/transportTaskManagement'

export default {
  computed: {
    ...mapState(['ossaddr'])
  },
  data() {
    return {
      mapshow: true, // 地图显示隐藏
      loading: false,// 加载条
      tabPosition: 'left',// 方向
      truckData: {},// 保存运输任务数据
      truckOrderData: [],// 保存运单数据
      startMap: {}, // 保存起点数据
      stopMap: {} // 保存终点数据
    }
  },
  methods: {
    exitInfo() {
      this.$router.push({path: '/transportTaskManagement'})
    },
    truckDataInit() {
      // 获取运单数据
      this.loading = true
      trucksportsAPI.getTruckOrderData(this.truckData.tid).then(({data}) => {
        if (data.data.length >= 1) {
          this.truckOrderData = data.data
          this.loading = false
        }
      })
    },
    selTrckOrderInfo(oid, tid) {
      this.$router.replace({
        path: '/orderCargoXQ',
        query: {
          'id': oid,
          'tid': tid,
          'pathAddr': '/transportTaskManagement'
        }
      })
    }
  },
  created() {
    // 获取运单数据
    this.truckDataInit()
    // 获取页面参数
    this.truckData = this.$route.query.truckData
    this.startMap = {"lng": parseFloat(this.truckData.startLong), "lat": parseFloat(this.truckData.startLat)}
    this.stopMap = {"lng": parseFloat(this.truckData.endLong), "lat": parseFloat(this.truckData.endLat)}
    // 重新渲染
    this.mapshow = false
    this.$nextTick(() => {
      this.mapshow = true
    })
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 300px;
}
</style>
